<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听 reactive 对象</title>
</head>
<body>
<div id="app">
    <h1>个人信息：{{ person }}</h1>

    <button @click="addScore">添加成绩信息</button>
    <br>
    <button @click="changeObject">更改对象</button>
</div>
<script type="module">
    import {createApp, reactive, watch} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let person = reactive({
                name: "abcque",
                age: 18,
                gender: "M",
            })

            function addScore() {
                person.score = {
                    "java": 100,
                    "javascript": 96,
                    "jsp":69,
                }
            }

            function changeObject() {
                console.log("更改对象");
                // person = {}
                person = reactive({
                    name: "kevin",
                    age: 21,
                    gender: "M",
                })
            }
            watch(
                person,
                function () {
                    console.log("检测到 person 发生了变化");
                }
            )
            return {
                person,
                addScore,
                changeObject,
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>